<template>
  <v-layout row>
    <v-flex xs12 sm6 offset-sm3>
      <v-card>
        <v-toolbar color="white" fixed>
          <v-btn icon light @click="$router.go(-1)">
            <v-icon color="grey darken-2">arrow_back</v-icon>
          </v-btn>

          <v-toolbar-title class="grey--text text--darken-4"
            >话题</v-toolbar-title
          >

          <v-spacer></v-spacer>

          <v-btn icon light>
            <!-- <v-icon color="grey darken-2">search</v-icon> -->
            <v-icon class="material-icons">star_border</v-icon>
            <v-icon class="material-icons">more_vert</v-icon>
          </v-btn>
        </v-toolbar>
        <div class="m-container">
          <scroll>
            <v-subheader>May</v-subheader>
            <v-container fluid grid-list-xs>
              <v-layout row wrap>
                <v-flex v-for="i in 6" :key="i" xs4>
                  <img
                    :src="
                      `https://randomuser.me/api/portraits/men/${i + 20}.jpg`
                    "
                    alt="lorem"
                    class="image"
                    height="100%"
                    width="100%"
                  />
                </v-flex>
              </v-layout>
            </v-container>

            <v-subheader>June</v-subheader>
            <v-container fluid grid-list-xs>
              <v-layout row wrap>
                <v-flex v-for="i in 6" :key="i" xs4>
                  <img
                    :src="
                      `https://randomuser.me/api/portraits/women/${i + 5}.jpg`
                    "
                    alt="lorem"
                    class="image"
                    height="100%"
                    width="100%"
                  />
                </v-flex>
              </v-layout>
            </v-container>
            <v-subheader>June</v-subheader>
            <v-container fluid grid-list-xs>
              <v-layout row wrap>
                <v-flex v-for="i in 6" :key="i" xs4>
                  <img
                    :src="
                      `https://randomuser.me/api/portraits/women/${i + 5}.jpg`
                    "
                    alt="lorem"
                    class="image"
                    height="100%"
                    width="100%"
                  />
                </v-flex>
              </v-layout>
            </v-container>
            <v-subheader>June</v-subheader>
            <v-container fluid grid-list-xs>
              <v-layout row wrap>
                <v-flex v-for="i in 6" :key="i" xs4>
                  <img
                    :src="
                      `https://randomuser.me/api/portraits/women/${i + 5}.jpg`
                    "
                    alt="lorem"
                    class="image"
                    height="100%"
                    width="100%"
                  />
                </v-flex>
              </v-layout>
            </v-container>
          </scroll>
        </div>
      </v-card>
    </v-flex>
  </v-layout>
  <!-- <div>
    <div class="m-header">
      <div><i class="material-icons">arrow_back</i>话题</div>
      <div>
        <i class="material-icons">star_border</i>
        <i class="material-icons">more_vert</i>
      </div>
    </div>
    <div class="m-container"></div>
    <router-link to="/">
      <v-btn color="error">跳回首页</v-btn>
    </router-link>
    <v-btn color="error" @click="link">跳回首页</v-btn>
  </div> -->
</template>

<script>
import { Component, Vue } from "vue-property-decorator";
import scroll from "@/components/scroll.vue";
@Component({
  components: {
    scroll
  }
})
export default class ThemeList extends Vue {
  created() {
    // const push = this.$router.push;
    // this.$router.push = function() {
    //   console.log(33333);
    // };
  }
  link() {
    this.$router.push({
      path: "/"
    });
  }
}
</script>

<style lang="scss" scoped>
.m-header {
  display: flex;
  justify-content: space-between;
  background: $themeColor;
  height: 40px;
}
.m-container {
  position: fixed;
  top: 56px;
  bottom: 0;
  // padding-top: 56px;
  // height: 100vh;
  // overflow: hidden;
}
</style>
